<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>发布乐器页面</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		
		<style>
			.mui-content{
				background-color: #FFFFFF;
				overflow-y: scroll;
			}
			.width{
				100%
			}
			.div1{
				padding-left: 10px;
			    
			}
			.div2{
				padding-right: 10px;
		 
			}
			.div3{
				border-bottom: 1px solid #eeeeee;
	            height: 70px;
			}
			.inputStyle{
				width: 100%;
				border: 1px solid #eeeeee;				
			}
			.div4{
				width: 100%;
				border: 1px solid #B6B6B6;
				border-radius: 5px;
				height: 40px;
			}
			
			
			.div6{
				width: 100%;
				text-align: center;
			
			}
			.div5{
				position: relative;
				display: inline;
				float: left;
			}
			.img1{
				width: 100px;
				height: 100px;
				margin: 5px;
			}
			.img2{
				width: 20px;
				margin-left: -20px; 
				position: absolute;
			}
            .img3{
				position: absolute;
				width: 20px;
				margin-left: 90px;
			}
			
			#videoMedia {
				margin-top: 0px;
				
				width: 100%;
				height:200px;
				border: solid 1px #eeeeee;
				
			}
		</style>
	</head>
	<!--
    	作者：offline
    	时间：2017-09-18
    	描述：只能上传一个视频,可以上传很多张图片
    -->
	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">发表</h1>
            <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="submitMessage()" style="color: white;border: none;">上传</button>
		</header>

		<div class="mui-content fill-all">
			<div class="flex width v-center div3">
				<div class="flex-2 div1">视频名称:</div>
				<div class="flex-5 div2">
					<input class="inputStyle" type="text" placeholder="请输入视频名称"/>
				</div>
				
			</div>
			
			
			<div class="flex width v-center div3">
				<div class="flex-2 div1">视频分类:</div>
				<div class="flex-5 div2">
					<div class="div4 flex v-center" onclick="onClassify()">
						<div id="role" class="flex-1 fill-h text-size flex v-center" style="padding-left: 10px;">
							选择分类
						</div>
						<div class="left text-size">
							<span class="mui-icon mui-icon-arrowdown"></span>
						</div>
					</div>
				
			   </div>				
			</div>	
		    <div class="flex width v-center">
					<div class="flex-2 div1">添加图片:</div>
					<div class="flex-5 div2">
						<img style="width: 50px;" onclick="addImg()" src="../img/icon-issue-add.png"/>
					</div>
					
			</div>
			<!--图片显示-->
			<div id="divImg" class="div6">
				
				<!--<img class="img1"  src="../img/bg-01.png">
					<img onclick="deleteImg()" class="img2" src="../img/error-icon.png" />			
				</img>
				<div class="div5">
					<img class="img3" src="../img/error-icon.png"/>
					<img class="img1"  src="../img/bg-01.png">
				</div>-->
							
				
			</div>
			
			<div style="width: 100%;height: 1px;border-top:solid #eeeeee 1px;margin-top: 20px;clear: both;"></div>
			<div class="flex width v-center">
					<div class="flex-2 div1">添加视频:</div>
					<div class="flex-5 div2">
						<img style="width: 50px;" onclick="addVideo()" src="../img/icon-issue-add.png"/>
					</div>
					
			</div>
			<!--图片显示-->
			<div id="divVideo" class="div6">
				<video style="visibility: hidden;" webkit-playsinline id="videoMedia" controls="controls" preload></video>
				<!--<img class="img1"  src="../img/bg-01.png">
					<img onclick="deleteImg()" class="img2" src="../img/error-icon.png" />			
				</img>-->
				<!--<div class="div5">
					<img class="img3" src="../img/error-icon.png"/>
					<img class="img1"  src="../img/bg-01.png">
				</div>-->
							
				
			</div>	
		</div>
		<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
			    <!-- 可选择菜单 -->
			    <ul class="mui-table-view">
			      <li class="mui-table-view-cell">
			        <a onclick="cancle(1)" href="#" >相册</a>
			      </li>
			      <li class="mui-table-view-cell">
			        <a onclick="cancle(2)" href="#" >相机</a>
			      </li>
			       <li class="mui-table-view-cell">
			        <a onclick="cancle(3)" href="#" >乐谱库</a>
			      </li>
			    </ul>
			    <!-- 取消菜单 -->
			    <ul class="mui-table-view">
			      <li class="mui-table-view-cell">
			        <a onclick="cancle(0)" href="#sheet" ><b>取消</b></a>
			      </li>
			    </ul>
		</div>
		<div id="sheet2" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="videoClassify(1)" href="#" >练习曲</a>
		      </li>
		      <li class="mui-table-view-cell">
		        <a onclick="videoClassify(2)" href="#" >乐曲</a>
		      </li>
		       <li class="mui-table-view-cell">
		        <a onclick="videoClassify(3)" href="#" >其他</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="videoClassify(0)" href="#sheet1" ><b>取消</b></a>
		      </li>
		    </ul>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			mui.init();
			
			function submitMessage(){
				mui.toast("提交成功")
			}
			
			//添加图片
			function addImg(){
				mui('#sheet').popover("show");
			}
			
			function cancle(num){
				mui('#sheet').popover("hide");
				if(num!=0){
					
					//判断是相册还是相机
					if(num==1){  //选第一个   相册
						
						galleryImgsMaximum();
					}else if(num == 2){    //选第二个     相机
						getImage();
						
					}if(num == 3){    //乐谱库,是从网络获取的
						musicLibrary();
						
					}
				}
				
			}
			//打开分类
			function onClassify(){
				mui('#sheet2').popover("show");
			}
			//选择分类
			function videoClassify(num){
				mui('#sheet2').popover("hide");
				if(num!=0){
					//document.getElementById("selectNum").value=num;
					//判断是老师还是学生
					if(num==1){
						document.getElementById("role").innerText="练习曲";
					}else if(num==2){
						document.getElementById("role").innerText="乐曲";
						
					}else{
						document.getElementById("role").innerText="其他";
						
					}
				}
				
			}
			
			
			
			// 拍照
			function getImage(){
				printLog('开始拍照：');
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p){
					//printLog('成功：'+p); 
					
					plus.io.resolveLocalFileSystemURL(p, function(entry){
						//printLog(entry.toLocalURL());
						appendDiv(new Array(entry.toLocalURL()));
					
					
					}, function(e){
						mui.alert('读取拍照文件错误：'+e.message);
					});
				}, function(e){
					mui.alert('失败：'+e.message);
				}, {filename:'_doc/camera/',index:1});
			}
			//选择照片
			function galleryImgsMaximum(){
				// 从相册中选择图片
				printLog('从相册中选择多张图片(限定最多选择3张)：');
			    plus.gallery.pick(function(e){
			    	appendDiv(e.files);//显示已经选择的图片
			    	    	
			    }, function(e){
			    	printLog('取消选择图片');
			    	                            //maximum可以修改选择数量
			    },{filter:'image',multiple:true,maximum:5,system:false,onmaxed:function(){
					plus.nativeUI.alert('最多只能选择5张图片');
			    }});// 最多选择3张图片
			}
			//从乐谱库选择
			function musicLibrary(){
				mui.alert("从网络乐谱库选择图片");
			}
			
			function deleteImg(i){
				printLog("删除了第" + i + "张"+eTemp.length);
				
				if(eTemp != null && eTemp.length > 0){
					eTemp.splice(i,1);    //删除指定位置的照片
					showDiv(eTemp);
				}
				
				
			}
			var eTemp = new Array;
			//传递进来一个图片地址集合,讲所有的图片显示出来
			function appendDiv(e){
				var arr = new Array;
				arr = eTemp.concat(e);
				eTemp = arr;
				printLog("图片还有"+arr.length);
				var divImg = document.getElementById("divImg");
		    	var div = "";
		    	for(var i in arr){			    		
			    //	printLog(arr[i]);				    	
			    //	div += '<img class="img1" src="'+ e[i] +'"><img onclick="deleteImg('+ i +')" class="img2" src="../img/error-icon.png" /></img>';				    				    	
		    	    div += '<div class="div5"><img class="img3" onclick="deleteImg('+ i +')" src="../img/error-icon.png"/><img class="img1"  src="'+ arr[i] +'"></div>';
		    	}
		    	divImg.innerHTML = div;
						
			}
			//删除掉图片之后的刷新界面
			function showDiv(e){
				
				var divImg = document.getElementById("divImg");
		    	var div = "";
		    	for(var i in e){			    		
			   
		    	    div += '<div class="div5"><img class="img3" onclick="deleteImg('+ i +')" src="../img/error-icon.png"/><img class="img1"  src="'+ e[i] +'"></div>';
		    	}
		    	divImg.innerHTML = div;
						
			}
			
			
			//添加视频
			function addVideo(){
				printLog("找视频");
				plus.gallery.pick(function(p){
                    showVideo(p.files);
				},function (e) {
					
				},{filter:"video",multiple:true,maximum:1,system:false,onmaxed:function(){
					plus.nativeUI.alert('最多只能选择1个视频');
			    }});// 最多选择3张图片
			}
			function showVideo(v){
				 printLog("找视频"+v[0]);  //视频路径
	            document.getElementById("videoMedia").style.visibility='visible';
		    	document.getElementById("videoMedia").setAttribute("src",v[0]);
			}
			
			
		</script>	
	</body>
</html>
